<html>
  <head>
  
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      //google.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart1() {
	
        // Create the data table.
        var jsonData = $.ajax({
			url: "<?= base_url()?>reportes/emergencias",
			dataType:"json",
			async: false,
			data:{
				fechIni:$('#fechIni').val(),
				fechFin:$('#fechFin').val(),
				}
			}).responseText;

		// Create and populate the data table.
		var data = new google.visualization.DataTable(jsonData);

        // Set chart options
        var options = {'title':'Emergencias reportadas según distrito',
						'is3D': true,
                       'width':600,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div1'));
        chart.draw(data, options);
		
		// Create the data table.
        var jsonData = $.ajax({
			url: "<?= base_url()?>reportes/tipo_emergencias",
			dataType:"json",
			async: false,
			data:{
				fechIni:$('#fechIni').val(),
				fechFin:$('#fechFin').val(),
				}
			}).responseText;

		// Create and populate the data table.
		var data = new google.visualization.DataTable(jsonData);

        // Set chart options
        var options = {'title':'Emergencias Reportadas segun tipo de emergencia',
						'is3D': true,
                       'width':600,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div3'));
        chart.draw(data, options);
      }
	  function drawChart2() {
	
        // Create the data table.
        var jsonData = $.ajax({
			url: "<?= base_url()?>reportes/incidentes",
			dataType:"json",
			async: false,
			data:{
				fechIni:$('#fechIni2').val(),
				fechFin:$('#fechFin2').val(),
				}
			}).responseText;

		// Create and populate the data table.
		var data = new google.visualization.DataTable(jsonData);

        // Set chart options
        var options = {'title':'Incidentes reportados segun distrito',
						'is3D': true,
                       'width':600,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div2'));
        chart.draw(data, options);
		
		// Create the data table.
        var jsonData = $.ajax({
			url: "<?= base_url()?>reportes/tipo_incidentes",
			dataType:"json",
			async: false,
			data:{
				fechIni:$('#fechIni2').val(),
				fechFin:$('#fechFin2').val(),
				}
			}).responseText;

		// Create and populate the data table.
		var data = new google.visualization.DataTable(jsonData);

        // Set chart options
        var options = {'title':'Incidentes reportados segun tipo de emergencias',
						'is3D': true,
                       'width':600,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div4'));
        chart.draw(data, options);
      }
    </script>
	 <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
        <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
		<script src="<?php echo base_url() ?>js/jquery.validate.js" type="text/javascript"></script>
				<!-- <script src="<?php echo base_url() ?>js/css3-mediaqueries.js" type="text/javascript"></script> -->
		<script src="<?php echo base_url() ?>js/custom.js" type="text/javascript"></script>
		<!-- <script src="<?php echo base_url() ?>js/nicEdit.js" type="text/javascript"></script> -->
		<script src="<?php echo base_url() ?>js/jquery.uniform.min.js" type="text/javascript"></script>
  </head>

  <body>
	<script type="text/javascript">
            $(document).ready(function() {
                $("#fechIni" ).datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true });
			});
			$(document).ready(function() {
                $("#fechFin" ).datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true });
			});
			$(document).ready(function() {
                $("#fechIni2" ).datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true });
			});
			$(document).ready(function() {
                $("#fechFin2" ).datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true });
			});
    </script>
	<h1>Reporte de Alertas</h1>
	<div>
		<h2>Emergencias Reportadas</h2>
		<div>
			<p>
				<label>Fecha Inicio:</label>
                <?php $fechIni = array('name' => 'fechIni', 'id' => 'fechIni', 'size' => 15, 'class' => 'required dateISO', 'title' => 'Por favor ingrese una fecha', 'value' => set_value('fechIni')); ?>
                <?= form_input($fechIni) ?>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<label>Fecha Fin:</label>
                <?php $fechFin = array('name' => 'fechFin', 'id' => 'fechFin', 'size' => 15, 'class' => 'required dateISO', 'title' => 'Por favor ingrese una fecha', 'value' => set_value('fechFin')); ?>
                <?= form_input($fechFin) ?>
            </p>
		</div>
		<p class="clear">
                <input id="clickMe" type="button" value="Generar Reporte" class="button-blue" onclick="drawChart1();"/>
                <input type="button" value="Ver en mapa" class="button-blue" onclick="window.location='<?= base_url() ?>home/emergencias'"/>
        </p>
		
		<!--Div that will hold the pie chart-->
		<div>
			<div id="chart_div1" height='400px'></div>
			<div id="chart_div3" height='400px'></div>
		</div>
	</div>
	</p>
    <div>
		<h2>Incidentes Reportados</h2>
		<div>
			<p>
				<label>Fecha Inicio:</label>
                <?php $fechIni2 = array('name' => 'fechIni2', 'id' => 'fechIni2', 'size' => 15, 'class' => 'required dateISO', 'title' => 'Por favor ingrese una fecha', 'value' => set_value('fechIni2')); ?>
                <?= form_input($fechIni2) ?>
				&nbsp;&nbsp;&nbsp;&nbsp;
				<label>Fecha Fin:</label>
                <?php $fechFin2 = array('name' => 'fechFin2', 'id' => 'fechFin2', 'size' => 15, 'class' => 'required dateISO', 'title' => 'Por favor ingrese una fecha', 'value' => set_value('fechFin2')); ?>
                <?= form_input($fechFin2) ?>
            </p>
		</div>
		<p class="clear">
                <input id="clickMe" type="button" value="Generar Reporte" class="button-blue" onclick="drawChart2();" />
                <input type="button" value="Ver en mapa" class="button-blue" onclick="window.location='<?= base_url() ?>home/incidentes'"/>
        </p>
		
		<!--Div that will hold the pie chart-->
		<div>
			<div id="chart_div2"></div>
			<div id="chart_div4"></div>
		</div>
	</div>
    
  </body>
</html>